<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
  <title>活动详情</title>
  <style>
		html, body {width: 100%;min-height: 100%;background: #fff;}
		.h20 {height: 0.5rem;background: #f0f0f0;margin: 0 -1rem;;}

    #header_top {
        background: #2997e4;
        padding-top: 25px;
    }
    .detail_con {
      padding: 1rem;
    }
    .detail_title h3 {
      font-size: 0.9rem;
      color: #333;
    }
    .detail_price h5 {
      font-size: 0.75rem;
      color: #333;
      margin: 1rem 0;
    }
    .detail_addtime h5 {
      font-size: 0.6rem;
      color: #999;
      margin: 1rem 0;
    }
    .detail_time h5 {
      font-size: 0.75rem;
      color: #333;
      margin: 1rem 0;
    }
    .detail_address h5 {
      font-size: 0.75rem;
      color: #333;
      margin: 1rem 0;
    }
    .detail_tit_sm h4 {
      font-size: 0.75rem;
      color: #333;
      font-weight: bold;
      line-height: 1.2rem;
    }
    .detail_text p {
      font-size: 0.75rem;
      line-height: 1.2rem;
      color: #333;
      margin: 1rem 0;
    }
    .detail_tit_sm h4 {
      margin: 1rem 0;
    }


        .ml_btns {
          position: fixed;
          bottom: 0;
          width: 100%;
          margin: 0 -1rem;
        }
        .ml_btn {
          background: #f0f0f0;
          float: left;
          width: 50%;
          padding: 0.5rem 0;
          text-align: center;
          color: #666;
        }
        .ml_btn img {
          width: 0.7rem;
          display: inline-block;
          vertical-align: middle;
          margin-right: 0.4rem;
        }
        .ml_btn:nth-child(2) {
          background: #2997e4;
          color: #fff;
        }
        .detail_text {
          padding-bottom: 2.5rem;
        }
        #header_top {
          position: fixed;
          top:0;
          width: 100%;
        }
        .detail_con {
          padding-top: calc(1rem + 65px);
        }
	</style>
</head>
<body>
  <div id="app" v-cloak>
<header id="header_top" class="aui-bar aui-bar-nav" >

  <a class="aui-pull-left"  onclick="goback()">
      <span class="aui-iconfont aui-icon-left"></span>
  </a>
  <div class="aui-title" id="title">
  活动详情
</div>
    <a class="aui-pull-right" @click="openMore(id)">
        <span class="aui-iconfont aui-icon-more"></span>
    </a>
</header>
<div class="detail_con">
  <div class="detail_title">
    <h3>{{info.title}}</h3>
  </div>
  <div class="detail_addtime">
    <h5>{{info.create_date}}</h5>
  </div>
  <!-- <div class="detail_time">
    <h5>时间: {{info.apply_date}} ~ {{info.activity_end_date}}</h5>
  </div>
  <div class="detail_address">
    <h5>地点: {{info.address}}</h5>
  </div>
  <div class="detail_price">
    <h5>价格: ￥{{info.apply_cost}} </h5>
  </div>
  <div class="h20"></div>
  <div class="detail_tit_sm">
    <h4>活动简介</h4>
  </div> -->
  <div class="detail_text" v-html="info.content"></div>
    <div class="ml_btns">
      <div class="ml_btn" @click="to_chat(info.userid,info.respon)">
        咨询
      </div>
      <div class="ml_btn" @click="openDetail('wybm', '我要报名', id, info)" v-if="info.isapply == 0">
        我要报名
      </div>
      <div class="ml_btn" @click="qxbm" v-else-if="info.isapply == 1">
        取消报名
      </div>
    </div>
</div>

</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script>
    function goback () {
    var jsfun = 'window.location.reload()';
      api.execScript({
        name: 'index_hd',
        script: jsfun
    });
      api.closeWin({name:api.pageParam.name});
    }


    //打开聊天窗口
    function to_chat(id,name,type){
      console.log(name);
      api.openWin({
          name: 'user_info_' + id,
          url: '../forth_frame/user_info_details_win.html',
          pageParam: {
              id: id,
              name: name,
              chat_type:'PRIVATE'
          }
      });
    }



apiready = function() {
var app = new Vue({
  el: '#app',
  data: {
    id: 0,
    info: {},
    token:$api.getStorage('token')
  },
  created: function() {
    var $_this = this;
    $_this.id = api.pageParam.id
    if(!$api.getStorage('token') || $api.getStorage('token') == "" || $api.getStorage('token') == null || $api.getStorage('token') == 'undefined'){
      api.confirm( {
          title: '是否登录',
          msg: '确认是否登录？',
          buttons: [ '确定', '取消' ]
        }, function ( ret, err ) {
          var index = ret.buttonIndex;
          if ( index == 1 ) {
            api.openWin({
              name: 'login',
              url: '../five_frame/login_header.html',
              delay: 200,
              bounces: false
            });
            return;
          } else {
            api.closeWin({
                name: name
            });
            return
          }
        })
        return
      }
    api.ajax({
      url: window.Url.getActivityDetail + $_this.id,
      timeout: 300,
      headers: {
					  'baseParams': $_this.token //token
					},
    }, function(ret, err) {
        if (ret) {
          // console.log($_this.id)
            // api.alert({ msg: JSON.stringify(ret) });
              // console.log(JSON.stringify(ret));
            $_this.info = ret.data

        } else {
            api.alert({ msg: JSON.stringify(err) });
        }
    })
  },
  methods: {
    openDetail:function (type, title, id, data) {
      api.openWin({
        name: 'index_detail_' + type,
        pageParam: {
          name: 'index_detail_' + type,
          title: title,
          id: id,
          data: data
        },
        url: './first_header.html',
        delay: 200,
        bounces: false
      });
    },

    openMore: function (id) {
      api.openFrame ({
              name: 'more',
              url: './more.html',
              rect:{
                  x:0,
                  y:44,
                  w:'auto',
                  h:'auto'
              },
              pageParam: {
                id: id,
                type: 'hd'
              },
              bounces: false,
              delay:200
          })
    },
    qxbm: function () {
      var $_this = this
      api.confirm( {
        title: '取消报名',
        msg: '确认取消报名？',
        buttons: [ '确定', '取消' ]
      }, function ( ret, err ) {
        var index = ret.buttonIndex;
        if ( index == 1 ) {
          api.ajax({
            url: window.Url.exitActivity + $_this.id,
            timeout: 300,
            headers: {
      					  'baseParams': $_this.token //token
      					},
          }, function(ret, err) {
              if (ret) {
                    // console.log(JSON.stringify(ret));
                    if (ret.code == 0) {
                      api.toast({ msg: '取消报名成功',duration: 2000,location:'middle' });
                      $_this.info.isapply = 0
                    } else {
                      api.toast({ msg: ret.message,duration: 2000,location:'middle' });
                    }
              } else {
                  api.alert({ msg: JSON.stringify(err) });
              }
          })
        }
      })
    }
  },
  filters: {
		  time: function (value) {
		    value = new Date(value)
		    return value.getFullYear() + '-' + value.getMonth() + '-' + value.getDate() + ' ' + value.getHours() + ':' + value.getMinutes()
		},
  }
})
}
</script>
</html>
